<template>
  <div id="userGaze">
    <div class="userMaterialTitle">
      <h2 class="active" @click="handleOption()">我的关注 <span  v-show="option == 0"></span></h2>
      <h2 class="active" @click="handleOption()">工作室关注 <span  v-show="option == 1"></span></h2>
    </div>
    <div class="userGazeContent">
      <ul v-show="option == 0">
        <li v-for="(item, index) in userAttention" :key="index" @click="handleUserDetail(index, item.userType, item.userId)">
          <img :src="$globalImageUrl + item.avatar" alt="">
          <p class="ellipse">{{item.userName}}</p>
        </li>
      </ul>
      <ul  v-show="option == 1">
        <li v-for="(item, index) in records" :key="index" @click="handleUserDetail2(index, item.studioType)">
          <img :src="$globalImageUrl + item.studioLogo" alt="">
          <p class="ellipse">{{item.studioName}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from '@/store';
export default {
  name: 'userGaze',
  data () {
    return {
      option: 0,
      data: 1,
      userAttention: '',
      records: ''
    }
  },
  created () {
    this.getAttentionList()
  },
  methods: {
    handleOption () {
      if (this.option == 0) {
        this.option = 1
      } else {
        this.option = 0
      }
    },
    // 锚点跳转到用户信息
    handleUserDetail (index, type) {
        this.$router.push('/stylistInfo?stylistUserId=' + this.userAttention[index].userId)
    },
    handleUserDetail2 (index, type) {
      if (type == 1){
        this.$router.push('/stylistInfo?sceneType=megagame&studioId=' + this.records[index].id)
      } else {
        this.$router.push('/stylistInfo?sceneType=teacher&studioId=' + this.records[index].id)
      }
    },
    // 获取关注列表
    getAttentionList () {
      this.$api.getAttentionList({
        userId: store.state.user.userId,
        // userType: 2,
        pageNum: 1,
      }).then(res => {
        if (res.code === 0) {
          this.userAttention = res.data.user
          this.records = res.data.stuio.records
        }
        console.log(this.userAttention)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#userGaze{
  .userGazeContent{
    padding: .2rem;
    ul{
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      li:nth-child(7n) {
        margin-right: 0;
      }
      li{
        margin: 0 .2666rem .2rem 0;
        width: 1rem;
        img{
          display: inline-block;
          width: 1rem;
          height: 1rem;
          border-radius: 500px;
        }
        p{
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          text-align: center;
          margin-top: .1rem;
        }
      }
    }
  }
}
</style>
